<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        body {
            margin-top: 5px;
        }
    </style>
    <script src="WebIMConfig.js"></script>
    <script src="js/webimSDK3.0.5.js"></script>
    <script src="js/EMedia_x1v1.js"></script>


</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">登录和注册</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <input type="text" class="form-control" id="name" placeholder="用户id"/><br>
                        <input type="text" class="form-control" id="pwd" placeholder="密码"/><br>
                        <button id="reg" type="button" class="btn btn-primary">注册</button>
                        <button id="login" type="button" class="btn btn-primary">登录</button>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">消息接收者</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <input type="text" class="form-control" id="toname" placeholder="接收消息用户id"/><br>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">群发系统广播</h3>
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control" /><br>
                    <button id="broadcast" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title" id="talktitle"></h3>
                </div>
                <div class="panel-body">
                    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">

                    </div>
                    <input type="text" id="msg" class="form-control col-md-12"/> <br>
                    <button id="send" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    // 连接初始化
    var conn = {};
    console.log(WebIM, window.WebIM);
    WebIM.config = config;
    conn = WebIM.conn = new WebIM.default.connection({
        appKey: WebIM.config.appkey,
        isHttpDNS: WebIM.config.isHttpDNS,
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        host: WebIM.config.Host,
        https: WebIM.config.https,
        url: WebIM.config.xmppURL,
        apiUrl: WebIM.config.apiURL,
        isAutoLogin: false,
        heartBeatWait: WebIM.config.heartBeatWait,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval,
        isStropheLog: WebIM.config.isStropheLog,
        delivery: WebIM.config.delivery
    })
    // 监听连接，服务器发送过来的处理
    conn.listen({
        onOpened: function (message) {          //连接成功回调
            var myDate = new Date().toLocaleString();
            console.log("%c [opened] 连接已成功建立", "color: green");
            console.log(myDate);
        },
        onClosed: function (message) {//连接关闭回调
            console.log("onclose:" + message);
            console.log(error);
        },
        onTextMessage: function (message) {//收到文本消息
            console.log('onTextMessage: ', message);
            // 接收服务端的实时消息并添加到HTML页面中
            $("#log-container").append("<div class='bg-info'><label class='text-danger'>" + message.from + "&nbsp;" + message.ext.time + "</label><div class='text-success' style='text-align: left'>" + message.sourceMsg + "</div></div><br>");
            // 滚动条滚动到最低部
            scrollToBottom();
        }
    });

    //绑定登录按钮的单击事件
    document.getElementById('login').onclick = function () {
        console.log(WebIM, window.WebIM);
        var uname = document.getElementById("name").value;
        var upwd = document.getElementById("pwd").value;
        options = {
            apiUrl: WebIM.config.apiURL,
            user: uname,
            pwd: upwd,
            appKey: WebIM.config.appkey
        };
        // 请求登陆
        conn.open(options);
        console.log(options)
    };

    // 发送信息相关
    //文本消息
    var conf = WebIM.config
    //var WebIM = WebIM.default
    WebIM.config = conf
    WebIM.message = WebIM.default.message
    WebIM.utils = WebIM.default.utils
    WebIM.debug = WebIM.default.debug
    WebIM.statusCode = WebIM.default.statusCode

    document.getElementById('send').onclick = function () {
        var myDate = new Date().toLocaleString();
        // 当前用户
        var uname = document.getElementById("name").value;
        // 接收者
        var tname = document.getElementById("toname").value;
        // 发送的内容
        var tmsg = document.getElementById("msg").value;
        var id = conn.getUniqueId();                 // 生成本地消息id
        var msg = new WebIM.default.message('txt', id);      // 创建文本消息
        msg.set({
            msg: tmsg,                  // 消息内容
            to: tname,
            ext: {
                'time': myDate
            },                       // 接收消息对象（用户id）
            success: function (id, serverMsgId) {
                console.log('send private text Success');
                msgText = msg.body.msg;
            },
            fail: function (e) {
                console.log("Send private text error");
            }
        });
        msg.body.chatType = 'singleChat';
        // 发送消息
        conn.send(msg.body);
        console.log(msg);
        document.getElementById("msg").value = "";
        $("#log-container").append("<div class='bg-success'><label class='text-info'>我&nbsp;" + new Date().toLocaleString() + "</label><div class='text-info' style='text-align: right'>" + tmsg + "</div></div><br>");
        scrollToBottom();
    };

    // 让聊天窗口滚动到底部
    function scrollToBottom() {
        var div = document.getElementById('log-container');
        div.scrollTop = div.scrollHeight;
    }

</script>
</html>